<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-size: 14px;
				/*行高*/
				line-height: 20px;
			}
			
			a {
				text-decoration: none;
				color: blue;
			}
			
			a:hover {
				color: red;
			}
			
			img {
				border: 0;
				vertical-align: middle;
			}
			
			.treeStyle {
				list-style: none;
				display: none;
			}
		</style>
		<script type="text/javascript">
			function show(bookType) {
				//如果列表是显示状态，则改为隐藏状态
				//在dom操作照片那个，获取了dom对象之后，可以通过style对象设置style中的样式属性值
				if(document.getElementById(bookType).style.display == 'block') {
					document.getElementById(bookType).style.display = 'none';
				} else {
					document.getElementById(bookType).style.display = 'block';
				}

			}
		</script>
	</head>

	<body>
		<b><a href="javascript:show('tree3')"><img src="img/2016-09-05_114025.png"/>图书分类</b></a>
		<!--实现图书分类下的两个子类1.文艺2.励志/成功 有同样的格式-->
		<ul id="tree3" class="treeStyle">
			<p>
				<li>
					<a href="javascript:show('tree1')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/2016-09-05_114025.png" />文艺</a>
				</li>
			</p>
			<ul id="tree1" class="treeStyle">
				<li><img src="img/2016-09-05_114025.png" />文学</li>
				<li><img src="img/2016-09-05_114025.png" />传记</li>
				<li><img src="img/2016-09-05_114025.png" />艺术</li>
				<li><img src="img/2016-09-05_114025.png" />摄影</li>
			</ul>
			<p>
				<li>
					<a href="javascript:show('tree2')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/2016-09-05_114025.png" />励志/成功</a>
				</li>
			</p>
			<ul id="tree2" class="treeStyle">
				<li><img src="img/2016-09-05_114025.png" />职场</li>
				<li><img src="img/2016-09-05_114025.png" />成功</li>
				<li><img src="img/2016-09-05_114025.png" />人际</li>
				<li><img src="img/2016-09-05_114025.png" />修养</li>
			</ul>
		</ul>
	</body>

</html>